import { initializeJobData } from './JobData.js';
async function idxTest() {
  let { householdList, technology, projectTypeListName, projectTypeListValue, positionList } = await initializeJobData();
  getIndexData(householdList, technology, projectTypeListName, projectTypeListValue, positionList)
  return
}

idxTest()


function getIndexData(householdList, technology, projectTypeListName, projectTypeListValue, positionList) {
  // 柱状图1模块
  (function () {
    // 实例化对象
    var myChart = echarts.init(document.querySelector(".bar .chart"));
    // 指定配置和数据
    var option = {
      color: ["#2f89cf"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: "0%",
        top: "10px",
        right: "0%",
        bottom: "4%",
        containLabel: true
      },
      xAxis: [
        {
          type: "category",
          data: [
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月"
          ],
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: "12"
            }
          },
          axisLine: {
            show: false
          }
        }
      ],
      yAxis: [
        {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: "12"
            }
          },
          // 文字
          axisLabel: {
            color: '#4c9bfd'
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)"
            }
          }
        }
      ],
      series: [
        {
          name: "平均薪资",
          type: "bar",
          barWidth: "35%",
          data: [17000, 18000, 17500, 16800, 18000, 18300, 19000],
          itemStyle: {
            barBorderRadius: 5
          },
          color: new echarts.graphic.LinearGradient(
            // (x1,y2) 点到点 (x2,y2) 之间进行渐变
            0, 0, 0, 1,
            [
              { offset: 0, color: '#00fffb' }, // 0 起始颜色
              { offset: 1, color: '#0061ce' }  // 1 结束颜色
            ]
          )
        }
      ]
    };

    // 把配置给实例对象
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  })();

  // 折线图定制
  (function () {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector(".line .chart"));

    // (1)准备数据
    var data = {
      year: [
        [42, 40, 44, 39, 37, 44, 48, 45, 51, 47]
      ]
    };

    // 2. 指定配置和数据
    var option = {
      color: ["#00dddd"],
      tooltip: {
        // 通过坐标轴来触发
        trigger: "axis"
      },
      legend: {
        // 距离容器10%
        right: "10%",
        // 修饰图例文字的颜色
        textStyle: {
          color: "#4c9bfd"
        }
        // 如果series 里面设置了name，此时图例组件的data可以省略
        // data: ["邮件营销", "联盟广告"]
      },
      grid: {
        top: "20%",
        left: "3%",
        right: "4%",
        bottom: "3%",
        show: true,
        borderColor: "#012f4a",
        containLabel: true
      },

      xAxis: {
        type: "category",
        boundaryGap: false,
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月"
        ],
        // 去除刻度
        axisTick: {
          show: false
        },
        // 修饰刻度标签的颜色
        axisLabel: {
          color: "rgba(255,255,255,.7)"
        },
        // 去除x坐标轴的颜色
        axisLine: {
          show: false
        }
      },
      yAxis: {
        type: "value",
        // 去除刻度
        axisTick: {
          show: false
        },
        // 修饰刻度标签的颜色
        axisLabel: {
          color: "rgba(255,255,255,.7)"
        },
        // 修改y轴分割线的颜色
        splitLine: {
          lineStyle: {
            color: "#012f4a"
          }
        }
      },
      series: [
        {
          name: "就业人数",
          type: "line",
          stack: "总量",
          // 是否让线条圆滑显示
          smooth: true,
          data: data.year[0]
        }
      ]
    };
    // 3. 把配置和数据给实例对象
    myChart.setOption(option);

    // 重新把配置好的新数据给实例对象
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  })();


  (function () {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector(".new .chart"));

    var option = {
      tooltip: {
        trigger: "item",
        formatter: "{b}: {c} ({d}%)",
        position: function (p) {
          //其中p为当前鼠标的位置
          return [p[0] + 10, p[1] - 10];
        }
      },
      legend: {
        top: "90%",
        itemWidth: 10,
        itemHeight: 10,
        data: ["18-22岁", "22-26岁", "26-30岁", "30岁以上"],
        textStyle: {
          color: "rgba(255,255,255,.5)",
          fontSize: "12"
        }
      },
      series: [
        {
          name: "年龄分布",
          type: "pie",
          center: ["50%", "42%"],
          radius: ["40%", "60%"],
          color: [
            "#065aab",
            "#066eab",
            "#0682ab",
            "#0696ab",
            "#06a0ab",
            "#06b4ab",
            "#06c8ab",
            "#06dcab",
            "#06f0ab"
          ],
          label: { show: false },
          labelLine: { show: false },
          data: [
            { value: 4, name: "18-22岁" },
            { value: 2, name: "22-26岁" },
            { value: 2, name: "26-30岁" },
            { value: 1, name: "30岁以上" }
          ]
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  })();




  // 项目类型
  (function () {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector(".bar1 .chart"));

    // 指定配置和数据
    var option = {
      color: ["#2f89cf"],
      tooltip: {
        trigger: "axis",
        axisPointer: {    // 坐标轴指示器，坐标轴触发有效
          type: "shadow"  // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: "0%",
        top: "10px",
        right: "0%",
        bottom: "4%",
        containLabel: true
      },
      xAxis: [
        {
          type: "category",
          data: projectTypeListName,
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: 10
            }
          },
          axisLine: {
            show: false
          }
        }
      ],
      yAxis: [
        {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: "12"
            }
          },
          // 文字
          axisLabel: {
            color: '#4c9bfd'
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)"
            }
          }
        }
      ],
      series: [
        {
          name: "人数",
          type: "bar",
          barWidth: "35%",
          data: projectTypeListValue,
          itemStyle: {
            barBorderRadius: 5
          },
          color: new echarts.graphic.LinearGradient(
            // (x1,y2) 点到点 (x2,y2) 之间进行渐变
            0, 0, 0, 1,
            [
              { offset: 0, color: '#00fffb' }, // 0 起始颜色
              { offset: 1, color: '#0061ce' }  // 1 结束颜色
            ]
          )
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  })();

  // 地区分布
  (function () {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".line1 .chart"));
    var householdColor = [
      "#006cff",
      "#60cda0",
      "#ed8884",
      "#ff9f7f",
      "#0096ff",
      "#9fe6b8",
      "#32c5e9",
      "#1d9dff"
    ]
    if (householdList.length < 8) {
      addressColor = householdColor.slice(0, householdList.length)
    }
    // 2. 指定配置项和数据
    var option = {
      legend: {
        top: "90%",
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          color: "rgba(255,255,255,.5)",
          fontSize: "12"
        }
      },
      tooltip: {
        trigger: "item",
        formatter: "{b} : {c} ({d}%)"
      },
      // 注意颜色写的位置
      color: householdColor,
      series: [
        {
          name: "点位统计",
          type: "pie",
          // 如果radius是百分比则必须加引号
          radius: ["10%", "70%"],
          center: ["50%", "42%"],
          roseType: "radius",
          // data: [
          //   { value: 20, name: "云南" },
          //   { value: 26, name: "北京" },
          //   { value: 24, name: "山东" },
          //   { value: 25, name: "河北" },
          //   { value: 20, name: "江苏" },
          //   { value: 25, name: "浙江" },
          //   { value: 30, name: "深圳" },
          //   { value: 42, name: "广东" }
          // ],
          data: householdList,
          // 修饰饼形图文字相关的样式 label对象
          label: {
            fontSize: 10
          },
          // 修饰引导线样式
          labelLine: {
            // 连接到图形的线长度
            length: 10,
            // 连接到文字的线长度
            length2: 10
          }
        }
      ]
    };

    // 3. 配置项和数据给我们的实例化对象
    myChart.setOption(option);
    // 4. 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
      // 让我们的图表调用 resize这个方法
      myChart.resize();
    });
  })();

  // 主流技术
  (function () {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector(".pie1  .chart"));
    var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
    var option = {
      color: myColor,
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}%'
      },
      series: [
        {
          name: 'Funnel',
          type: 'funnel',
          left: '10%',
          top: 20,
          bottom: 0,
          width: '80%',
          min: 0,   // 最小值
          max: 100, // 最大值
          minSize: '0%',  //  最小宽度
          maxSize: '100%',  //  最大宽度
          sort: 'descending', //  数据排序  ascending 从小到大  descending 从大到小
          gap: 2, //   每一项之间的间距
          label: {
            show: true,
            position: 'inside',
            fontSize: 12
          },
          labelLine: {
            length: 10,
            lineStyle: {
              width: 1,
              type: 'solid'
            }
          },
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1
          },
          emphasis: {
            label: {
              fontSize: 15,
              color: 'black'
            }
          },
          data: technology
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  })();



  // 返回原因
  (function () {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector(".cause  .chart"));

    // 返回原因数据
    var causeData = [
      { value: 1048, name: '直接访问' },
      { value: 735, name: '邮件营销' },
      { value: 580, name: '联盟广告' },
      { value: 484, name: '视频广告' },
      { value: 300, name: '搜索引擎' }
    ]
    var causeColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];

    var option = {
      tooltip: { trigger: 'item' },
      color: causeColor,
      top: 0,
      legend: {
        bottom: "bottom",
        textStyle: {
          color: "rgba(255,255,255,0.5)",
          fontSize: "12"
        }
      },
      series: [
        {
          // name: 'Access From',
          type: 'pie',
          bottom: 0,
          radius: '60%',
          data: causeData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 1)'
            }
          }
        }
      ]
    };

    // 设置初始大小
    var canvas = document.getElementById('my-chart');
    // canvas.style.width = '268px';
    canvas.style.height = '458px';

    // 监听窗口大小变化
    window.addEventListener("resize", function () {
      // 调整Canvas大小
      // canvas.style.width = '268px';
      canvas.style.height = '458px';

      // 通知ECharts重绘
      myChart.resize();
    });

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    // window.addEventListener("resize", function () {
    //   myChart.resize();
    // });
  })();

  // 岗位分布
  (function () {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector(".post  .chart"));
    var color = ["#1089E7", "#F57474", "#56D0E3", "#F8B448"];

    var option = {
      tooltip: {
        trigger: 'axis',
        showContent: false
      },
      dataset: {
        source: positionList
      },
      color: color,
      xAxis: {
        type: 'category',
        axisLabel: {
          color: "white"
        }
      },
      yAxis: {
        gridIndex: 0,
        axisLabel: {
          color: "white"
        }
      },
      grid: { top: "60%" },
      series: [
        {
          type: 'line',
          smooth: true,
          seriesLayoutBy: 'row',
          emphasis: { focus: 'series' },
          symbolOffset: ['50%', '25%'],
        },
        {
          type: 'line',
          smooth: true,
          seriesLayoutBy: 'row',
          emphasis: { focus: 'series' }
        },
        {
          type: 'line',
          smooth: true,
          seriesLayoutBy: 'row',
          emphasis: { focus: 'series' }
        },
        {
          type: 'line',
          smooth: true,
          seriesLayoutBy: 'row',
          emphasis: { focus: 'series' }
        },
        {
          type: 'pie',
          id: 'pie',
          radius: '30%',
          center: ['50%', '35%'],
          emphasis: {
            focus: 'self'
          },
          label: {
            formatter: function (params) {
              return params.name + ': ' + params.percent.toFixed(2) + '%' + ` ${params.data[params.dataIndex]}人`;
            }
          },
          itemName: 0,  // 职位名称
          value: 1,  // 数量，假设每个月份的数量分别位于第1、2、3、4个维度
          tooltip: 1  // 工具提示也应指向数量
        }
      ]
    };
    myChart.on('updateAxisPointer', function (event) {
      const xAxisInfo = event.axesInfo[0];
      if (xAxisInfo) {
        const dimension = xAxisInfo.value + 1;
        myChart.setOption({
          series: {
            id: 'pie',
            label: {
              formatter: function (params) {
                return params.name + ': ' + params.percent.toFixed(2) + '%' + `  ${params.data[dimension]}人`;
              }
            },
            encode: {
              itemName: 0,  // 职位名称
              value: dimension,  // 数量，假设每个月份的数量分别位于第1、2、3、4个维度
              tooltip: dimension  // 工具提示也应指向数量
            }
          }
        });
      }
    });
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
      // var canvas = document.getElementById('post');
      // canvas.width = 268; // 设定固定的宽度
      // canvas.height = 458; // 设定固定的高度
    });
  })();
}